<script setup lang="ts">
const props = defineProps<{
  text:String,
  style?: {type:Object },
  prefix?:String,
  suffix?:String,
  iconSize?:{type:Number,default:0.6}
}>()

const emit = defineEmits(['click'])

const click = ()=>{
  emit("click");
}
</script>

<template>
  <div class="btn" :style="props.style" @click="click"> 
     <SvgIcon v-if="props.prefix" :iconSize="props.iconSize" :name="props.prefix" style="padding-right: 0.2rem;"/>  
     <span>{{props.text}}</span> {{props.iconSize}}
     <SvgIcon v-if="props.suffix" :iconSize="0.6" :name="props.suffix" style="padding-left: 0.2rem;"/>  
  </div>
</template>
<style scoped>
  .btn{user-select: name;
    float:right; display: flex;align-items: center;font-size: 0.9rem;border:1px solid #e3e5e7; padding:0.1rem 0.8rem;border-radius:0.3rem;cursor: pointer;
    color:var(--vv-form-item-color);font-size:0.9rem;
  }
  .btn span{user-select: none;}
</style>
